<template>
  <div class='container'>
<el-card class="box-card">
  <div slot="header" class="clearfix">
    <!-- 搜索-->
      <el-form :model="requestParameters">
        <div class="filter-container">
            <el-form-item label="学校名称">
            <el-input
            @keyup.enter="handleFilter"

            style="width: 200px ;"
            class="filter-item"
            v-model="requestParameters.subjectName"
            ></el-input>
            <el-button

            class="filter-item"
            size="small"
            @click="onClear"
            >清除</el-button>
            <el-button
            @click="handleFilter"
            size="small"
            class="filter-item"
            type="primary"
            >搜索</el-button>
            <el-button
              class="filter-item fr"
              size="small"
              style="margin-left: 10px;"
              type="primary"
              icon="el-icon-edit"
             @click="p5()"
            >新增学科</el-button>
            </el-form-item>
        </div>

      </el-form>
        <!-- 提示消息 -->
      <el-alert
          :title="'数据一共'+total+'条记录'"
          type="info"
          show-icon>
      </el-alert>
      <!-- 数据 -->
    <el-table :data="dataList" style="width: 100%; margin-top: 20px">
         <el-table-column prop="id" label="序号"  width="50" type="index">
          </el-table-column>
          <el-table-column prop="subjectName" label="学科名称" width="180">
          </el-table-column>
          <el-table-column prop="username" label="创建者" >
          </el-table-column>
          <el-table-column
            label="创建日期"
            prop="addDate"
            width="180"
        >
          <template v-slot="scope">
            {{ new Date(scope.row.addDate) | parseTime }}
          </template>
        </el-table-column>
          <el-table-column
            label="前台是否显示">
          <template v-slot="scope">
            {{ scope.row.isFrontDisplay === 1 ? '是' : '否' }}
          </template>
        </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录" >
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="标签" >
          </el-table-column>
          <el-table-column prop="totals" label="题目数量"  >
          </el-table-column>
          <el-table-column  label="操作" width="270px">
            <template v-slot="{row}">

           <button type="button" class="el-button--text" @click="p1(row)"><span>学科分类</span></button>
           <button type="button" class="el-button--text " @click="p2(row)"><span>学科标签</span></button>
           <button type="button" class="el-button--text " @click="p3(row)"><span>编辑</span></button>
           <button type="button" class="el-button--text " @click="p4(row)"><span>删除</span></button>

            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div>
          <page-tool
            @list="list"
            :paginationPage="requestParameters.page"
            :paginationPagesize="requestParameters.pagesize"
            :total="total"
             @pageChange="handleCurrentChange"
             @pageSizeChange="handleSizeChange"
          ></page-tool>
        </div>
  </div>
   <!-- 弹窗 编辑1-->
      <!-- v-if="isShow"
   :is-show="isShow" -->
   <tanchuang

     :show-dialog.sync="showDialog"
     :forms='forms'
     @list="list"
   ></tanchuang>
   <!-- 弹窗2 添加-->
   <tianjiatanchuang
   :show-dialog.sync="isshowDialog"
   @list="list"
   ></tianjiatanchuang>
</el-card>
  </div>

</template>

<script>
// 学科列表
import { list, remove, update } from '@/api/hmmm/subjects'
import pageTool from '../../module-dashboard/components/pageTool.vue'
import Tanchuang from '../components/tanchuang.vue'
import Tianjiatanchuang from '../components/tianjiatanchuang.vue'
export default {
  components: { pageTool, Tanchuang, Tianjiatanchuang },
  name: 'subjects',
  data () {
    return {
      requestParameters: {}, // 收索
      forms: {}, // 传给子组件
      showDialog: false, // 控制分配权限弹层的显示后者隐藏
      isshowDialog: false,
      total: '', // 总的页码
      dataList: [], // 数据
      formsss: {
        sID: '',
        page: 1, // 当前页码
        pagesize: 10 // 每页条数
      },
      ruleInline: {
        // 表单验证
        title: [{ required: true, message: '学校名称不能为空', trigger: 'blur' }]
      }
      // isShow: true // 控制是否销毁组件
    }
  },

  methods: {
    // 每页显示信息条数
    handleSizeChange (val) {
      this.formsss.pagesize = val
      if (this.formsss.page === 1) {
        this.list(this.formsss)
      }
    },
    // // 进入某一页
    handleCurrentChange (val) {
      this.formsss.page = val
      this.list()
    },
    // 获取数据
    async list () {
      const { data } = await list(this.formsss)
      console.log(data)
      this.dataList = data.items
      // this.total = data.counts
    },
    // 搜索信息
    handleFilter () {
      this.formsss = { ...this.requestParameters }
      this.list()
    },
    // 清除搜索框
    onClear () {
      this.requestParameters = {}
      this.formsss = {}
      this.list()
    },
    // 跳转学科分类
    p1 (row) {
      console.log(row.id)
      this.$router.push({ path: '/subjects/directorys', query: { id: row.id, subjectName: row.subjectName } })
    },
    // 跳转学科标签
    p2 (row) {
      console.log(row.id)
      this.$router.push({ path: '/subjects/tags', query: { id: row.id, subjectName: row.subjectName } })
    },
    // 新增学科
    // 修改
    async p3 (row) {
      // console.log(id)
      const res = await update(row)
      console.log(res, '这里')
      this.forms = JSON.parse(res.config.data)
      console.log(this.forms, '这里1')
      this.showDialog = true
    },
    // 删除
    async p4 (id) {
      try {
        console.log(id)
        await this.$confirm('确认删除？')
        await remove(id)
        this.list()
        this.$message.success('删除角色成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 新增加学科
    p5 () {
      this.isshowDialog = true
    }
    // 弹框取消
    // btnCancel () {
    //   this.showDialog = false
    // }
  },

  async created () {
    const { data } = await list(this.formsss)
    console.log(data)
    this.total = data.counts
    // console.log(list)
    this.list()
  }

}
</script>

<style lang='less' scoped>
.el-input {
  .el-input__inner {
    width: 200px;
    margin-left: 35px;
  }
}
.filter-item{
  margin-left: 10px
}
</style>
